<!-- 待办事项 -->
<template>
  <div>
    <HomeCard title="待办事项" @checkedTimer="checkedTimer">
      <template v-slot:content>
        <div class="todo-list">
          <div
            class="todo-item"
            v-for="item in todoList"
            :key="item.id"
            @click="openAction(item)"
          >
            <div class="todo-item-left">
              <Badge :dot="item.platformTodoTypeCount > 0">
                <a href="#" class="badge">
                  <img :src="item.imgUrl" />
                </a>
              </Badge>
              <div class="todo-item-centent">
                {{ item.platformTodoTypeName }}
              </div>
            </div>
            <div class="todo-item-right">{{ item.platformTodoTypeCount }}</div>
          </div>
        </div>
      </template>
    </HomeCard>
  </div>
</template>

<script type="text/javascript">
import { getMyTodo } from "@/api/home.js";

import HomeCard from "@/pages/components/homeCard/index.vue";

import img_1 from "../../assets/icon/icon_01 (2).png";
import img_2 from "../../assets/icon/icon_01 (3).png";
import img_3 from "../../assets/icon/icon_01 (4).png";
import img_4 from "../../assets/icon/icon_01 (5).png";

import {
  clearTodo, // 清除反馈
} from "@/api/home";

export default {
  name: "todo-page",
  components: {
    HomeCard,
  },
  data() {
    return {
      todoList: [],
      todoListImg: {
        CompanyWaitAuditCount: {
          icon: img_1,
          urlName: "enterpriseInforExamine",
        },
        BusinfoWaitAuditCount: {
          icon: img_2,
          urlName: "businessInformationManage",
        },
        DivideIntoWaitAuditCount: {
          icon: img_3,
          urlName: "sharingRuleAudit",
        },
        BusinfoFeedbackNotifyCount: {
          icon: img_4,
          urlName: "businessInformationManage",
        },
      },
    };
  },
  methods: {
    checkedTimer(item) {
      console.log(item, "选中时间");
    },
    async getMyTodoData() {
      // CompanyWaitAuditCount(0, "企业待审核数量"),
      // BusinfoWaitAuditCount(1, "经营信息待审核数量"),
      // DivideIntoWaitAuditCount(2, "收益规则待审核数量"),
      // BusinfoFeedbackNotifyCount(3, "经营信息已反馈"),
      let data = await getMyTodo({});
      data.forEach((o) => {
        o.imgUrl = this.todoListImg[o.platformTodoType].icon;
        o.urlName = this.todoListImg[o.platformTodoType].urlName;
      });
      this.todoList = data;
      console.log(data, "data");
    },
    openAction(item) {
      if (item.platformTodoType == "BusinfoFeedbackNotifyCount") {
        this.clearTodoData(item);
      }
      this.$router.push({
        name: item.urlName,
      });
    },
    // 清除经营信息反馈待办
    async clearTodoData(item) {
      let params = {
        platformTodoType: item.platformTodoType,
        clearCount: item.platformTodoTypeCount,
      };
      let data = await clearTodo(params);
    },
  },
  mounted() {
    this.getMyTodoData();
  },
};
</script>

<style lang="less" scoped>
.badge {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  display: inline-block;
  img {
    display: block;
    width: 52px;
  }
}
.todo-item {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  line-height: 42px;
  cursor: pointer;
  .todo-item-left {
    height: 42px;
    display: flex;
    img {
      height: 42px;
      width: auto;
    }
    .todo-item-centent {
      margin-left: 15px;
      font-size: 16px;
      font-weight: bold;
    }
  }
  .todo-item-right {
    height: 28px;
    line-height: 28px;
    font-size: 14px;
    padding: 0 15px;
    border-radius: 20px;
    background: #0052d9;
    color: #fff;
    font-size: 16px;
  }
}
</style>
